<template>
	
	<uni-cell :tag="tag">
		<view class="vf-header-box" :class="{shadow}" :style="{height: allHeight+'px'}">
			<view class="vf-header-bg" :style="{height: allHeight+'px', backgroundColor: bgColor, top: barHeight+'px'}">
				
				<image v-if="bg" class="bg-img" :src="bg" mode="scaleToFill" :style="{height: allHeight+'px'}"></image>
				
				<view v-if="status" class="state-height" :style="{height: barHeight+'px'}"></view>
				
				<view class="vf-header">
					<view class="left">
						<uni-icons v-if="leftIcon" :type="leftIcon" :color="leftColor" :size="leftSize" @click="leftClick()"></uni-icons>
						<text @click="rightClick()" class="left-text" v-if="leftText" :style="(leftColor? 'color:'+leftColor+';' : '') + (leftSize? 'fontSize:'+leftSize+'rpx;' : '')+leftStyle">{{ leftText }}</text>
						<slot name="left"></slot>
					</view>
					<view class="title">
						<text class="title-text" v-if="title" :style="{color: titleColor}">{{title}}</text>
						<slot name="title"></slot>
					</view>
					<view class="right">
						<uni-icons v-if="rightIcon" :type="rightIcon" :color="rightColor" :size="rightSize" @click="rightClick()"></uni-icons>
						<text @click="rightClick()" class="right-text" v-if="rightText" :style="(rightColor? 'color:'+rightColor+';' : '') + (rightSize? 'fontSize:'+rightSize+'rpx;' : '')+rightStyle">{{ rightText }}</text>
						<slot name="right"></slot>
					</view>
				</view>

			</view>
		</view>
	</uni-cell>
</template>

<script>
	export default {
		props: {
			bg: {
				type: String,
				default: ''
			},
			bgColor: {
				type: String,
				default: 'transparent'
			},
			title: {
				type: String,
				default: ''
			},
			titleColor: {
				type: String,
				default: '#333'
			},
			leftIcon: {
				type: String,
				default: ''
			},
			leftColor: {
				type: String,
				default: '#333'
			},
			leftSize: {
				type: [Number, String],
				default: 44
			},
			leftText: {
				type: String,
				default: ''
			},
			leftStyle: {
				type: String,
				default: ''
			},
			rightIcon: {
				type: String,
				default: ''
			},
			rightColor: {
				type: String,
				default: '#333'
			},
			rightSize: {
				type: [Number, String],
				default: 44
			},
			rightText: {
				type: String,
				default: ''
			},
			rightStyle: {
				type: String,
				default: ''
			},
			shadow: {
				type: Boolean,
				default: false
			},
			status: {
				type: Boolean,  // 状态栏显示
				default: false
			},
			tag: {
				type: [Boolean, String],
				default: false
			},
		},
		data() {
			return {
				barHeight: uni.getSystemInfoSync().statusBarHeight,
				wWidth: uni.getSystemInfoSync().windowWidth,
				wHeight: uni.getSystemInfoSync().windowHeight,
			};
		},
		computed:{
			allHeight() {
				return uni.upx2px(88);
			},
			titleWidth() {
				return this.wWidth - uni.upx2px(140);
			}
		},
		methods: {
			leftClick() {
				this.$emit('leftClick');
			},
			rightClick() {
				this.$emit('rightClick')
			}
		}
	}
</script>

<style lang="scss" scoped>
	$width: 750rpx;
	$height: 88rpx;
	
	
	.vf-header-box{
		width: $width;
	}
	.shadow {
		box-shadow: 0 0 84upx #ccc;
	}

	.vf-header-bg {
		height: $height;
		width: $width;
		position: fixed;
		top: 0;
		z-index: 10;
		background-color: #fff;
	}
	.bg-img{
		width: $width;
		position: absolute;
		z-index: 7;
	}

	.state-height {
		width: $width;
		left: 0;
		z-index: 9;
	}

	.vf-header {
		height: $height;
		width: $width;
		@include flex-row;
		justify-content: space-between;
		align-items: center;
		padding: 0 24rpx;
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		/* #endif */
		z-index: 9;
	}

	.left {
		height: 60upx;
		position: relative;
		z-index: 8;
		@include flex-row;
		align-items: center;
	}
	.left-text{
		font-size: 28rpx;
		color: #333;
		position: relative;
		z-index: 8;
	}

	.title {
		height: 88rpx;
		width: 610rpx;
		position: absolute;
		left: 70rpx;
		@include line(1, 610rpx);
		@include flex-row;
		align-items: center;
		justify-content: center;
		z-index: 8;
		font-size: $header-font-size;
	}
	.title-text{
		font-size: 36upx;
		// font-weight: 700;
		position: relative;
		z-index: 8;
	}


	.right {
		height: 40upx;
		position: relative;
		z-index: 8;
		@include flex-row;
		align-items: center;
	}
	.right-text{
		font-size: 28rpx;
		color: #333;
		position: relative;
		z-index: 8;
	}
</style>
